<template>
    <div>
         <form class="form-horizontal">
            <div class="form-group">
                <label  class="col-sm-2 control-label">图书名称</label>
                <div class="col-sm-10">
                <input type="text" class="form-control"  placeholder="图书名称" v-model="bookobj.bookName">
                </div>
            </div>
             <div class="form-group">
                <label  class="col-sm-2 control-label">作者</label>
                <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="作者" v-model="bookobj.author">
                </div>
            </div>
             <div class="form-group">
                <label  class="col-sm-2 control-label">上架日期</label>
                <div class="col-sm-10">
                <input type="date" class="form-control" placeholder="上架日期" v-model="bookobj.upTime">
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-2 control-label">图书类型</label>
                <div class="col-sm-10">
                   <select class="form-control" v-model="bookobj.bookType">
                        <option value="">请选择</option>
                        <option value="美食">美食</option>
                        <option value="运动">运动</option>
                        <option value="美食">金融</option>
                        <option value="学习">学习</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-success" @click="saveBtnClick">保存</button>
                </div>
            </div>
        </form>
    </div>
</template>

<script>
import {mapActions,mapState} from 'vuex'
    export default {
        data(){
            return {
                bookobj:{
                    author:'',
                    bookName:'',
                    upTime:'',
                    bookType:'',
                    bkStatus:'未借出'
                }
            }
        },
        methods:{
            ...mapActions([
                'postBookData'
            ]),
            saveBtnClick(){
                this.postBookData({obj:this.bookobj,router:this.$router})
            }
        }
    }
</script>

<style scoped>

</style>